<template>
    <div class="poster-main main">
        <section class="order-main-header">
            <mt-header title="发布广告">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            <mt-button  slot="right" ><router-link name="order" to="myOrder"><img class="img" src="../../assets/home.png" ></router-link></mt-button>
            </mt-header>
            
        </section>
         <div class="load-content">
            <div class="load-main">
                <div class="content">
                    <div class="tab">
                        <div class="buy flex-content" ><span @click="chooseTypeChange()"  v-bind:class="chooseType==true?'active':''">我要买币</span></div>
                        <div class="sell flex-content"><span style="text-align: center;" @click="chooseTypeChange()" v-bind:class="chooseType==false?'active':''">我要卖币</span></div>
                    </div>
                    <div class="form">
                        <div class="list">
                            <div class="symbio flex-between">
                                <span>交易币种</span>
                                <span class="order-red">USDT</span>
                            </div>
                            <div class="symbio flex-between">
                                <span>法币单位</span>
                                <span class="order-red">CNY</span>
                            </div>
                            <div class="el-symbio flex-between border sm-height" >
                                <span style="width:72px;text-align: left;">价格</span>
                                <div >
                                    <input type="number" name="phone" maxlength="11"  placeholder="请输入价格" v-model="price">
                                </div>
                                <div class="flex-column" style="width:300px;text-align: right;padding-top: 20px;" >
                                    <span class="right">CNY</span>
                                    <span class="text-font">当前价格:<span class="order-red"> ￥{{latest}}</span></span>
                                </div>
                            </div>
                            <div class="el-symbio flex-between border sm-height" >
                                <span style="width:90px;text-align: left;">数量</span>
                                <div >
                                    <input placeholder="请输入数量" type="number" name="number" maxlength="11"  v-model="number">
                                </div>
                                <div class="flex-column" style="width:480px;padding-top: 20px;">
                                    <span class="right"><span @click="quitBtn()" class="qit">全部</span>  <span>USDT</span></span>
                                    <span  class="text-font">当前可用:<span class="order-red"> ￥{{available}}</span></span>
                                </div>
                            </div>
                            <div class="symbio flex-between border">
                                <span class="width">订单总成交额</span>
                                <div>
                                    <input disabled placeholder="成交额" type="number" name="total" maxlength="11"  v-model="total">
                                </div>
                                <div class="flex-column">
                                    <span>CNY</span>
                                </div>
                            </div>
                            <div class="symbio flex-between border">
                                <span class="width">单笔最小成交额</span>
                                <div>
                                    <input placeholder="单笔最小成交额"  type="number" name="total" maxlength="11"  v-model="minNumber">
                                </div>
                                <div class="flex-column">
                                    <span>USDT</span>
                                </div>
                            </div>
                            <div class="symbio flex-between border">
                                <span class="width">单笔最大成交额</span>
                                <div>
                                    <input placeholder="单笔最大成交额" type="number" name="total" maxlength="11"  v-model="maxNumber">
                                </div>
                                <div class="flex-column ">
                                    <span>USDT</span>
                                </div>
                            </div>
                            <div class="symbio flex-between border">
                                <span>对方需实名才能交易</span>
                                <div class="flex-column">
                                
                                    <select class="payin-wapper-select is-card-select-otc" v-model="chooseTypeValue" >
                                        <option value="1" >是</option>
                                        <option value="0">否</option>
                                    </select>
                                </div>
                            </div>
                            <div class="textarea flex-column flex-start">
                                <span class="notic">备注（选填）</span>
                                    <textarea placeholder="28个字符内"  v-model="cardNote"></textarea>
                            </div>
                            <div class="symbio flex-between border">
                                <span>支付方式（可复选）</span>
                            </div>
                        <mt-checklist
                            align="right"
                            v-model="value" 
                        :options="options">
                        </mt-checklist>
                        <div class="upper-button"><button v-on:click="btn()" class="upper submit"   id="submit">确认发布</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
export default {
  name: 'poster',
  data () {
    return {
      value:[],
      maxNumber:'',
      minNumber:'',
      number:'',
      total:'',
      price:'',
      chooseType:1,
      chooseTypeValue:1,
      available:'',
      latest:'',
      cardNote:'',
      //checklist设置
			options : [{
		    label: '微信',
		    value: '2',
			},
			{
		    label: '支付宝',
		    value: '1',
			},
			{
		    label: '银行卡',
		    value: '0'
			}]
    }
  },
    watch:{
         number(val) {
              this.number=this.number.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
        this.total=(val*this.price).toFixed(2);
      },
      price(val){
          this.price=this.price.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
        this.total=(val*this.number).toFixed(2);
      }
  },
  mounted() {
      this.getBasicOrdersList();
  },
        methods:{
            quitBtn(){
                this.number=this.available;
            },
            btn(){
                 let otcBuyNumber=this.price;
           let otcMarketNumber=this.number;
           let quotaNumberMin=this.minNumber;
           let quotaNumberMax =this.maxNumber;
           let total=this.total;
            let cardNote=this.cardNote;
            if(otcBuyNumber==''){
                 Toast({
                    message: '价格不能为空',
                    });
                    return;
            }
             if(otcMarketNumber==''){
                 Toast({
                    message: '数量不能为空',
                    });
                    return;
            }
              if(quotaNumberMax==''){
                 Toast({
                    message: '单笔最小成交额不能为空',
                    });
                    return;
            }
             if(quotaNumberMax==''){
                 Toast({
                    message: '单笔最大成交额不能为空',
                    });
                    return;
            }
            if(otcBuyNumber<1){
              Toast({
                    message: '买入价格不能低于1',
                    });
                    return;
            }
             if(quotaNumberMin<1 || quotaNumberMax<1){
                 Toast({
                    message: '单笔交易限额最小为1',
                    });
                    return;
             }
             if(parseInt(quotaNumberMin)>parseInt(otcMarketNumber)){
                      Toast({
                    message: '最小交易限额不能大于数量',
                    });
                    return;
           }
           if(parseInt(otcMarketNumber)<parseInt(quotaNumberMax)){
                 Toast({
                    message: '最大交易限额不能大于数量',
                    });
                    return;
            }
                 if(parseInt(quotaNumberMax)<parseInt(quotaNumberMin)){
                    Toast({
                    message: '最大交易额不能小于最小交易额',
                    });
                    return;
            }
           if(quotaNumberMax<0){
             Toast({
                    message: '交易限额不能小于0',
                    });
                    return;
         }
               let checkbox =this.value[0];
            let checkbox1 =this.value[1];
            let checkbox2 =this.value[2];
            let type;
            let checkValue;
            if (!checkbox&&!checkbox1&& !checkbox2) {
              Toast({
                    message: '请选择您的收款方式',
                    duration: 2000
                    });
                    return;
                }
                    if(checkbox){
              checkValue = checkbox;
            }
            if(checkbox1){
            if(typeof checkValue!="undefined"){
              checkValue = checkValue +','+ checkbox1;
             }
            }
            if(checkbox2){
             if(typeof checkValue!="undefined"){
                 checkValue = checkValue +','+ checkbox2;
                }
         }
                if(this.chooseType){
                    type=0;
                }else if(!this.chooseType){
                    type=1;
                }
               let kycType=this.chooseTypeValue;
                MessageBox({
                    inputType: "password"
                    });
                      MessageBox.prompt("请输入资金密码","number").then(({ value, action }) => {
                   var data ={cid:this.cid,price:otcBuyNumber,amount:otcMarketNumber,otcRemarks:cardNote,kycType:kycType,
             minAmount:quotaNumberMin,maxAmount:quotaNumberMax,type:type,payWay:checkValue,safeWord:value}
            this.$http.post('/v1/account/saveOtcOrder', data,).then((data)=>{
                let res=data.data;
                if (res.code == 200) {
                            Toast({
                message: '发布成功',
                iconClass: 'icon icon-success'
                });
                this.$router.push("/myOrder");
             }
             else if (res.code == -100) {
                 // confirm_win("请先进行高级身份认证",
                     MessageBox.confirm("请先进行高级身份认证",).then(({ value, action }) => {
                     this.$router.push("/real");
                 });
             } else if (res.code == 2) {
                 Toast("请先进行安全认证",);
             } else if (res.code == 3) {
                 Toast("您的资金安全密码错误")
             } else if (res.code == 4) {
                 Toast("余额不足")
             } else if (res.code == 12) {
                 // confirm_win("您未绑定银行卡支付方式，去绑定？", function () {
                //      MessageBox.confirm("去绑定？",).then(({ value, action }) => {
                //      this.$router.push("/safeCenter/otcPayment");
                //  });
                 Toast("您未绑定银行卡支付方式")
             } else if (res.code == 13) {
                 // confirm_win("您未绑定支付宝支付方式，去绑定？", function () {
                      Toast("您未绑定支付宝支付方式")
             } else if (res.code == 14) {
                 // confirm_win("您未绑定微信支付方式，去绑定？", function () {
                      Toast("您未绑定微信支付方式")
             }else if (res.code == -2) {
                 // error_win("您当前没有挂单的权限，请到市场挂单处快速买入，或联系平台获得权限");
                  Toast("您当前没有挂单的权限，请到市场挂单处快速买入，或联系平台获得权限")
             } else if (res.code == 7) {
                 // error_win("当前市场每人最多可挂2单");
                  Toast("当前市场每人最多可挂2单")
                 }
             })
            }) 
            },
               getBasicOrdersList($this){
             this.$http.post('/v1/getOtcList',).then((res)=>{
                if (res.data.code == 200) {
                    let list=res.data.data;
                    for (var i = 0; i < list.length ; i++) {
                        if(list[i].fname=="USDT"){
                            this.cid=res.data.data[i].fid;
                        }
                    }
                }
                 this.$http.post('/v1/account/checkOtcLatest',{cid:this.cid},).then((res)=>{
                     if(res.data.code==200){
                         this.available=parseFloat(res.data.data.available).toFixed(2);
                         console.log( this.available)
                     this.latest=parseFloat(res.data.data.latest).toFixed(2);
                     }
                })
             })
        },
            chooseTypeChange(){
                this.chooseType= !this.chooseType
            },
            handleClose(){
                this.$router.go(-1)
            }
        }
}
</script>

<style scoped>
textarea{
height: 150px;
width: 100%;
border-radius:10px;
}
.text-font{
    font-size: 24px;
}
.right{
    position: relative;
    padding: 10px;
    text-align: right;
    margin-bottom: 10px;
    height: 30px;
    line-height: 30px;
}
.order-red{
    color: #F36D7D;
}
.width{
    width: 220px;
}
textarea{
    font-size: 32px;
    background-color: #161736;
    border:1px solid #161736;
}
.form .submit {
    width: 100%;
    height: 88px;
    font-size: 28px;
    line-height: 88px;
    font-weight: 700;
    color: #fff;
   background:#161736;
    border-radius:5px;
}
.order-main-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100px;
}
.order-main-header a{
     background: #222240;
     position: relative;
     margin-right: 5px;
}
/* .order-main-header header{
    width: 94%;
     background: #222240
} */
.red{
    color: #FF3333;
}
.list .sm-height{
height:120px;
text-align: right;
}
.upper-button{
padding: 60px 76px;
width: 80%;
padding-bottom: 60px;
background: #161736;
}
#submit{
    background: #3381ff;
    font-weight: 300;
}
.textarea .notic{
    margin-bottom: 20px;
    font-size: 28px;
    padding: 20px 20px 20px 0px;
}
.textarea{
    margin: 40px 30px 40px 30px;
    color: #E0E0F9;
}
.textarea textarea{
    box-sizing: border-box;
    padding: 18px 26px;
    color: #E0E0F9;
}
 .mint-cell-wrapper{
    background-image:none;
    height: 120px;
}
.qit{
    color: #5298F1;
    margin-right: 20px;
}
.list{
    background: #222240
}
  .flex-between{
      display: flex;
        justify-content: space-between;
    }
    .border{
        border-bottom: 1px solid #222240;
    }
    .flex-start{
        align-content: flex-start;
        display: flex;
    }
    .symbio{
            padding: 0px 30px 14px;
            color: #E0E0F9;
            height: 81px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
    }
    .el-symbio{
         padding: 16px 30px 0px 34px;
            color: #E0E0F9;
    height: 81px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 2px solid #161736;
    }
    input {
        width: 100%;
        height: 80px;
        line-height: 1;
        font-size: 28px;
        border-radius: 5px;
        border: none;
        padding: 0 30px;
        box-sizing: border-box;
        background-color: #222240;
        color: #8686E1;
    }
    input[type=text]:focus { 
    outline: none;
    border-color: #222240;
    background-color: #222240;
 }
input[type=text]::selection{
    background:transparent;
    background-color: #222240;
}
input[type=text]::-moz-selection{
    background:transparent;
    background-color: #222240;
}
.poster-main .buy{
width: 50%;
height: 100px;
line-height: 100px;
}
 .flex-column{
        flex-direction: column;
        display: flex;
    }
    .flex-row{
        flex-direction: row;
        display: flex;
    }
.poster-main .sell{
width: 50%;
height: 100px;
line-height: 100px;
}
.poster-main .buy span{
text-align: center;
width: 150px;
}
.main{
    background: #161736;
}
.flex-content{
      display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
.poster-main .sell span{
width: 50%;
height: 100px;
line-height: 100px;
}
.poster-main .tab{
    color: #E0E0F9;
display: flex;
background:#222240;
height: 100px;
border:1px solid #222240
}
.active{
    width: 150px;
    border-bottom:2px solid rgba(51,129,255,1);;
}
select{
    font-size: 24px;
        -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.poster-main .active{
color: #5298F1;
}
.main .mint-header{
    height: 100px;
    font-size: 32px;
    color: #E0E0F9;
    background: #161736;
}

input::-webkit-input-placeholder ,textarea::-webkit-input-placeholder{  	/* WebKit browsers */
    color: #8686E1;
}
input:-moz-placeholder,textarea:-moz-placeholder {            	/* Mozilla Firefox 4 to 18 */
    color: #8686E1;
}
input::-moz-placeholder,textarea ::-moz-placeholder{           	/* Mozilla Firefox 19+ */
    color: #8686E1;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {       	/* Internet Explorer 10+ */
    color: #8686E1;
}
   .load-content{
           position: absolute;
           top:130px;
           bottom: 0px;
           overflow-y: scroll;
           -webkit-overflow-scrolling:touch
       }
       .load-main{
           height: 2000px;
       }
</style>